<template>
  <div class="right_content">
			<PanelWrap class="ccyl_panel">
				<template #top>
					<RefreshPanel :timeVal="curTime"></RefreshPanel>
				</template>
				<template v-slot:mainContent>
					<div style="display: flex; flex-direction: row;align-items: center;">
						<span class="gs_item_t">江南水厂</span>
						<div id="chart_EFP_jb" class="chart_EFP"></div>
					</div>
					<div style="display: flex; flex-direction: row;align-items: center;">		
						<span class="gs_item_t">江北水厂</span>			
						<div id="chart_EFP_jn"  class="chart_EFP"></div>
					</div>
				</template>				
			</PanelWrap>
			<PanelWrap class="gsl_panel">
				<template #top>
					<RefreshPanel :timeVal="updateTime_gsl" refreshable="true" @reGetData="initCharts_gsl(1)"></RefreshPanel>
				</template>
				<template v-slot:mainContent>
					<div id="chart_gsl"></div>
				</template>				
			</PanelWrap>
			<PanelWrap class="yjzxsl_panel">
				<template #top>
					<RefreshPanel :timeVal="updateTime_yjzxsl"></RefreshPanel>
				</template>
				<template v-slot:mainContent>
					<div id="chart_yjzxsl"></div>
				</template>			
			</PanelWrap>
			<PanelWrap class="ssl_panel">
				<template #top>
					<RefreshPanel :timeVal="updateTime_ssl"></RefreshPanel>
				</template>			
				<template v-slot:mainContent>
					<div id="chart_ssl"></div>
				</template>	
			</PanelWrap>
		</div>
</template>

<script>
import PanelWrap from '@/components/PanelWrap'
import RefreshPanel from '@/components/RefreshPanel'
export default {
    name:'right_conetnt',
    data(){
        return{
			curTime:'2023-02-06',
			updateTime_gsl:'',
			updateTime_yjzxsl:'',
			updateTime_ssl:''
        }
    },
    components:{
        PanelWrap,
		RefreshPanel
    },
	mounted(){		
		this.initExfactoryPressure();
		this.initCharts_gsl();
		this.initCharts_yjzxsl();
		this.initCharts_ssl();
		// //告警事件
		// this.initSbsssj();
	},
	methods:{
		//供/售水量图
		initCharts_ssl(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data9',{}).then(res => {
				this.updateTime_ssl = res.data.updateTime;
				let option = {
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					title: {
						show:false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						type: 'shadow'
						}
					},
					legend: {
						data: ['供水', '售水'],
						right:10,
						top:10,
						// icon:'rect',
						// itemWidth:8,
						// itemHeight:8,
						textStyle:{
							color:'#FFFFFF'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: true,
						data:res.data.data[0].date
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name:'万吨'
					},
					series: [
						// {
						// 	name: res.data[0].name,
						// 	type: 'bar',
						// 	data: res.data[0].value
						// },
						{
							type: 'pictorialBar',
							barWidth: 10,
							zlevel: 2,
							// value: res.data[0].value,
							data: res.data.data[0].value.map(function (item) {
								return {
									value: item,
									symbol: '~@/assets/image/symbol/symbol_diamond.png',
								};
							}),
							name:'供水'
						},
						{
							type: 'pictorialBar',
							barWidth: 4,
							zlevel: 2,
							// value: res.data[1].value,
							data: res.data.data[1].value.map(function (item) {
								return {
									value: item,
									symbol: '~@/assets/image/symbol/symbol_diamond.png',
								};
							}),
							name:'售水'
						},
						// {
						// 	name: res.data[1].name,
						// 	type: 'bar',
						// 	data:  res.data[1].value
						// }
					],
				};
				var myChart = this.$echarts.init(document.getElementById('chart_ssl'));
				myChart.setOption(option);				
			})
		},
		//出厂压力
		initExfactoryPressure(){
			let option = {
				series: [
					{
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					center: ['50%', '90%'],
					radius: '160%',
					min: 0,
					max: 0.5,
					splitNumber: 10,
					axisLine: {
						lineStyle: {
						width: 2,
						color: [
							[0.5, '#58D9F9'],
							[0.8, '#FDDD60'],
							[1, '#FF6E76'],
						]
						}
					},
					pointer: {
						icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
						length: '18%',
						width: 10,
						offsetCenter: [0, '-45%'],
						itemStyle: {
						color: 'auto'
						}
					},
					axisTick: {
						length: 5,
						lineStyle: {
						color: 'auto',
						width: 1
						},
						splitNumber:10
					},
					splitLine: {
						length: 10,
						lineStyle: {
						color: 'auto',
						width:1
						}
					},
					axisLabel: {
						show:false,
					},
					title: {
						offsetCenter: [0, '-10%'],
						fontSize: 14,
						color:'rgba(255,255,255,0.6)'
					},
					detail: {
						fontSize: 18,
						offsetCenter: [0, '-25%'],
						color: 'auto'
					},
					data: [
						{
						value:0.28,
						name: 'Mpa'
						}
					]
					}
				]
				};
				let option2 = {
				series: [
					{
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					center: ['50%', '90%'],
					radius: '160%',
					min: 0,
					max: 0.5,
					splitNumber: 10,
					axisLine: {
						lineStyle: {
						width: 2,
						color: [
							[0.5, '#58D9F9'],
							[0.8, '#FDDD60'],
							[1, '#FF6E76'],
						]
						}
					},
					pointer: {
						icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
						length: '18%',
						width: 10,
						offsetCenter: [0, '-45%'],
						itemStyle: {
						color: 'auto'
						}
					},
					axisTick: {
						length: 5,
						lineStyle: {
						color: 'auto',
						width: 1
						},
						splitNumber:10
					},
					splitLine: {
						length: 10,
						lineStyle: {
						color: 'auto',
						width:1
						}
					},
					axisLabel: {
						show:false,
					},
					title: {
						offsetCenter: [0, '-10%'],
						fontSize: 14,
						color:'rgba(255,255,255,0.6)'
					},
					detail: {
						fontSize: 18,
						offsetCenter: [0, '-25%'],
						color: 'auto'
					},
					data: [
						{
						value:0.31,
						name: 'Mpa'
						}
					]
					}
				]
				};
			var myChart_jb = this.$echarts.init(document.getElementById('chart_EFP_jb'));
			myChart_jb.setOption(option);
			var myChart_jn = this.$echarts.init(document.getElementById('chart_EFP_jn'));
			myChart_jn.setOption(option2);

		},
		//供水量折线图
		initCharts_gsl(){
			//查询供水量数
			this.$axios.get('http://43.136.137.111:9898/system/mock/data28',{}).then(res => {
				this.updateTime_gsl = res.data.updateTime;
				let option = {
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						textStyle:{
							color:'#ffffff'
						},
						top:10,
						right:10,
						itemWidth:8,
						itemHeight:8
					},
					xAxis: {
						type: 'category',
						data:res.data.data.date,
						lineStyle:{
							color:'rgba(255, 255, 255, 0.2)'
						},
						splitLine:{
							show:false
						}
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: '(万吨)',
					},
					series: [
						{
							data: res.data.data.value,
							type: 'line',
							name:'实时供水量',	
							lineStyle:{
								color:'#9BC2D4'
							},
							areaStyle:{
								color:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(155, 194, 212, 0.8)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(155, 194, 212, 0.2)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
									//background: linear-gradient(360deg, rgba(231, 168, 8, 0.2) 28.99%, rgba(231, 168, 8, 0) 100%);

								}
							}			
						}
					],
					grid:{
						top:'65px',
						bottom:'25px',
						left:'45px',
						right:'25px'
					}
				};
				var myChart = this.$echarts.init(document.getElementById('chart_gsl'));
				myChart.setOption(option);
			})
			
		},
		//夜间最小水量图
		initCharts_yjzxsl(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data8',{}).then(res => {
				this.updateTime_yjzxsl = res.data.updateTime;
				let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['城区', '阳春', '康家坝'],
						right:10,
						top:10,
						icon:'rect',
						itemWidth:8,
						itemHeight:8,
						textStyle:{
							color:'#FFFFFF'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: res.data.data[0].date
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: 'm³',
					},
					series: [
						{
							name: '城区',
							type: 'line',
							stack: 'Total',
							data:res.data.data[0].value,
							symbol:'none'
						},
						{
							name: '阳春',
							type: 'line',
							stack: 'Total',
							data:res.data.data[1].value,
							symbol:'none'
						},
						{
							name: '康家坝',
							type: 'line',
							stack: 'Total',
							data: res.data.data[2].value,
							symbol:'none'
						}
					]
					};
				var myChart = this.$echarts.init(document.getElementById('chart_yjzxsl'));
				myChart.setOption(option);
			})
		}
	}
}
</script>

<style lang="less" scoped>
	.right_content{
		.panel_wrap{
			.panel_title{	
				.ccyl_title {
					background: url('~@/assets/image/ccyl.png') no-repeat 20px 9px;
				}

				.gsl_title {
					background: url('~@/assets/image/gsl.png') no-repeat 20px 9px;
				}

				.yjzxsl_title {
					background: url('~@/assets/image/yjzxsl.png') no-repeat 20px 9px;
				}

				.gssl_title {
					background: url('~@/assets/image/ssl.png') no-repeat 20px 9px;
				}

				.gsl_title{
					background: url('~@/assets/image/gsl.png') no-repeat 20px 9px;
				}
				.yjzxsl_title{
					background: url('~@/assets/image/yjzxsl.png') no-repeat 20px 9px;
				}
				.ssl_title{
					background: url('~@/assets/image/ssl.png') no-repeat 20px 9px;
				}				
			}				
		}
		
		.ccyl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/ccyl.png') no-repeat 20px 9px;
			}
			/deep/.panel_main{
				display: flex;
				flex-direction: row;
				.chart_EFP{
					width: 200px;
					height: 100px;
				}
				.gs_item_t{
					display: inline-block; 
					width: 26px;
					font-family: 'Source Han Sans CN';
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #FFFFFF;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					height: 100%;
					padding-top: 16px;
					padding-left: 30px;
				}
			}				
		}

		.gsl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/ssgsl.png') no-repeat 20px 9px;
			}
			#chart_gsl{
				width: 100%;
				height: 230px;
				// border: 1px solid green;
			}
		}
		.yjzxsl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/yjzxsl.png') no-repeat 20px 9px;
			}
			#chart_yjzxsl{
				width: 100%;
				height: 195px;
				// border: 1px solid green;
			}
		}
		.ssl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/ssl.png') no-repeat 20px 9px;
			}
			#chart_panel{
				width: 100%;
				height: 195px;
				// border: 1px solid green;
			}
		}
		.content_yjzxsl{
			#chart_yjzxsl{
				width: 100%;
				height: 225px;
				// border: 1px solid green;
			}
		}
		.ssl_panel{
			#chart_ssl{
				width: 100%;
				height: 230px;
				// border: 1px solid green;
			}
		}

		// 数据统计
		.sjtj_panel{
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/sjtj.png') no-repeat;
			}
			/deep/.panel_main{
				display: flex;
				.statis_list{
					width:36%;
					height:100%;
					margin-top: 10px;
					.sta_li{
						display: inline-block;
						width:100%;
						height:35px;
						padding:5px 0px;
						.icon{
							display: inline-block;
							width:24px;
							height:24px;
							vertical-align: middle;
						}
						.text{
							font-family: 'Source Han Sans CN';
							font-style: normal;
							font-weight: 400;
							font-size: 14px;
							line-height: 21px;
							color: rgba(255, 255, 255, 0.6);
						}
						.num{
							font-size: 18px;
							line-height: 22px;
						}
					}
				}
				.normal{
					.icon{
						background: url('~@/assets/image/normal.png');
						background-size: 100% 100%;
					}
					.num{
						color: #05B70B;
					}
				}
				.outline{
					.icon{
						background: url('~@/assets/image/outline.png');
						background-size: 100% 100%;
					}
					.num{
						color: #D81E06;
					}
				}
				.warning{
					.icon{
						background: url('~@/assets/image/warning.png');
						background-size: 100% 100%;
					}
					.num{
						color:  #EBA431;
					}
				}
				.notwork{
					.icon{
						background: url('~@/assets/image/notwork.png');
						background-size: 100% 100%;
					}
					.num{
						color: #20A1E9;
					}
				}
				#chart_sjtj{
					width:280px;
					height:130px;
					margin-top:20px;
				}
			}
		}	
		// 分区官网平均压力
		.fqgwpjyl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/fqgwpjyl.png') no-repeat;
			}
			#chart_fqwgpjyl{
				width:437px;
				height:210px;
			}
		}	
		// 报警列表
		.bjlb_panel{
			/deep/.title_text{
				// background: url('~@/assets/image/panelTitle/bjlb.png') no-repeat;
			}
			.my_table{
				width:100%;
				height: 250px;
				.warning_list{
					height: 200px;
					overflow: hidden;
				}
			}
		}		
		// 爆管记录
		.bgjl_panel{
			width:100%;
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/bgjl.png') no-repeat;
			}
			#chart_bgjl{
				width:437px;
				height:180px;
			}
		}		
	}
</style>